<template>
  <div class="content">
    <div class="tabs">
      <el-button
        class=" button"
        :class="type=='1'?'buttonActive':''"
        @click="clickSearch('1')"
      >内容同步
        <!-- <el-popover
          placement="top"
          width="200"
          trigger="hover"
          content="内容库中的内容一键同步多种小程序的操作任务"
        >
        </el-popover> -->
        <el-tooltip
          class="item"
          effect="dark"
          content="内容库中的内容一键同步多种小程序的操作任务"
          placement="bottom"
        >
          <i class="el-icon-question el-icon--right"></i>
        </el-tooltip>
      </el-button>
      <el-button
        class="button"
        :class="type=='2'?'buttonActive':''"
        @click="clickSearch('2')"
      >小程序内容同步
        <el-tooltip
          class="item"
          effect="dark"
          content="小程序内容同步到不同小程序中的同步任务"
          placement="bottom"
        >
          <i class="el-icon-question el-icon--right"></i>
        </el-tooltip>
      </el-button>
      <el-button
        class="button"
        :class="type=='3'?'buttonActive':''"
        @click="clickSearch('3')"
      >内容下架
        <el-tooltip
          class="item"
          effect="dark"
          content="内容库中将某些内容统一从小程序中下架的行为"
          placement="bottom"
        >
          <i class="el-icon-question el-icon--right"></i>
        </el-tooltip>
      </el-button>
    </div>
    <BiTable
      :loading="loading"
      :data="tableData"
      size="medium"
      :column="tableColums"
      fixed="sticky"
      fixed-offset="50"
      pagination
      layout="total, prev, pager, next"
      :auto-scroll="false"
      :total="page_info.total"
      :page.sync="page_info.page"
      :limit.sync="page_info.page_size"
      @pagination="handlePageChange"
    >
      <!-- <template v-slot:playlet="{ row }">
        <span>{{ row.playlet_text }}</span>
      </template>
      <template v-slot:target_mini_app="{ row }">
        <span>{{ row.target_mini_app_text }}</span>
      </template> -->
      <template v-slot:status="{ row }">
        <div class="colorStatus">
          <span
            v-if="row.status==='1'"
            class="indeter"
          >处理中</span>
          <span
            v-if="row.status==='2'"
            class="success"
          >成功</span>
          <span
            v-if="row.status==='3'"
            class="fail"
          >异常</span>
        </div>
      </template>
      <template v-slot:fail_msg="{ row }">
        <p v-if="row.status=='3'">{{ row.fail_mini_app_text }}小程序同步异常</p>
        <p v-else> - </p>
      </template>
    </BiTable>
  </div>
</template>
<script>
import { taskList } from '@/api/content'
export default {
  props: ['activeTab'],
  data() {
    return {
      loading: false,
      type: '1',
      tableData: [],
      tableColums: [
        {
          label: '任务类型',
          prop: 'type',
          render: (h, { row }) => {
            if (row.type === '1') {
              return <p>系统内容同步</p>
            } else if (row.type === '2') {
              return <p>小程序内容同步</p>
            } else if (row.type === '3') {
              return <p>内容下架</p>
            } else {
              return <span></span>
            }
          }
        },
        {
          label: '同步的短剧',
          prop: 'playlet_text'
        },
        {
          label: '同步的小程序',
          prop: 'target_mini_app_text'
        },
        {
          label: '操作人',
          prop: 'creator'
        },
        {
          label: '操作时间',
          prop: 'create_time'
        },
        {
          label: '同步结果',
          prop: 'status',
          slotScope: true
        },
        {
          label: '异常说明',
          prop: 'fail_msg',
          slotScope: true
        }
      ],
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      }
    }
  },
  mounted() {
    if (this.activeTab) {
      this.type === this.activeTab
      this.handleTable()
      this.clickSearch(this.activeTab)
    } else {
      this.clickSearch('1')
    }
  },
  methods: {
    handleTable() {
      if (this.type === '1') {
        const is_sync_title_index = this.tableColums.findIndex((item) => {
          return item.prop == 'is_sync_title'
        })
        is_sync_title_index != -1 ? this.tableColums.splice(is_sync_title_index, 1) : ''
        const modules_index = this.tableColums.findIndex((item) => {
          return item.prop == 'modules'
        })
        modules_index != -1 ? this.tableColums.splice(modules_index, 1) : ''
        const sync_type_index = this.tableColums.findIndex((item) => {
          return item.prop == 'sync_type'
        })
        sync_type_index != -1 ? this.tableColums.splice(sync_type_index, 1) : ''
        this.tableColums[1] = {
          label: '同步的短剧',
          prop: 'playlet_text'
        }
        this.tableColums[2] = {
          label: '同步的小程序',
          prop: 'target_mini_app_text'
        }
        this.tableColums = this.tableColums.concat([])
      } else if (this.type === '2') {
        this.tableColums[1] = {
          label: '数据源',
          prop: 'from_mini_app'
        }
        const index = this.tableColums.findIndex((item) => {
          return item.prop == 'is_sync_title'
        })
        console.log(index, '>>>>>>>>>>>>>>>>index')
        if (index == -1) {
          this.tableColums.splice(
            3,
            0,
            {
              label: '是否同步栏位名称和图标',
              prop: 'is_sync_title',
              render: (h, { row }) => {
                return <span>{row.is_sync_title == 1 ? '是' : '否'}</span>
              }
            },
            {
              label: '关联内容模块',
              prop: 'modules',
              render: (h, { row }) => {
                return row.modules.map((item, index) => {
                  return (
                    <span>
                      {item}
                      {row.modules.length - 1 == index ? '' : '/'}
                    </span>
                  )
                })
              }
            },
            {
              label: '内容同步方式',
              prop: 'sync_type',
              render: (h, { row }) => {
                return <span>{row.sync_type == 1 ? '追加同步内容' : '替换栏位内容'}</span>
              }
            }
          )
        }
        this.tableColums = this.tableColums.concat([])
      } else if (this.type === '3') {
        const is_sync_title_index = this.tableColums.findIndex((item) => {
          return item.prop == 'is_sync_title'
        })
        is_sync_title_index != -1 ? this.tableColums.splice(is_sync_title_index, 1) : ''
        const modules_index = this.tableColums.findIndex((item) => {
          return item.prop == 'modules'
        })
        modules_index != -1 ? this.tableColums.splice(modules_index, 1) : ''
        const sync_type_index = this.tableColums.findIndex((item) => {
          return item.prop == 'sync_type'
        })
        sync_type_index != -1 ? this.tableColums.splice(sync_type_index, 1) : ''
        this.tableColums[1] = {
          label: '下架的短剧',
          prop: 'playlet_text'
        }
        this.tableColums[2] = {
          label: '下架的小程序',
          prop: 'target_mini_app_text'
        }
        this.tableColums = this.tableColums.concat([])
      } else {
      }
    },
    clickSearch(type) {
      this.loading = true
      type ? (this.type = type) : ''
      this.handleTable()
      const data = {
        type: this.type,
        ...this.page_info
      }
      taskList(data).then((res) => {
        this.loading = false
        res.data.data.map((item) => {
          item.playlet_text = ''
          item.target_mini_app_text = ''
          item.fail_mini_app_text = ''
          if (item.playlet && item.playlet.length > 0) {
            item.playlet.map((items) => {
              item.playlet_text += items.title + '/'
            })
          } else {
            item.playlet_text = '-'
          }

          item.target_mini_app.map((items) => {
            item.target_mini_app_text += items.name + '/'
          })
          item.target_mini_app.map((items) => {
            item.fail_mini_app_text += items.name + '/'
          })
          item.playlet_text = item.playlet_text.substring(0, item.playlet_text.length - 1)
          item.target_mini_app_text = item.target_mini_app_text.substring(0, item.target_mini_app_text.length - 1)
          item.fail_mini_app_text = item.target_mini_app_text.substring(0, item.fail_mini_app_text.length - 1)
        })
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      })
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.$emit('ok')
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 930px;
  height: auto;
  padding: 20px;
}
.tabs {
  margin-bottom: 20px;
}
.buttonActive {
  background: #e1fff0;
  border-radius: 4px;
  border: 1px solid #06c261;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #06c261;
}
.button {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
</style>